<template>
  <div id="app">
    <router-view />
    <BottomNav v-if="isAuthenticated" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import BottomNav from './components/BottomNav.vue';

const isAuthenticated = ref(false);
const route = useRoute();

// 使用 watch 函数来监听路由变化
watch(route, (newRoute) => {
  // 检查是否已登录，并更新isAuthenticated状态
  if(newRoute.path==="/chat"){isAuthenticated.value=true}
  else if(newRoute.path==="/main"){isAuthenticated.value=true}
  else if(newRoute.path==="/settings"){isAuthenticated.value=true}
  else{isAuthenticated.value=false}
});

</script>

<style>

/* App 的全局样式 */
#app {
  overflow-y: hidden; /* 禁用垂直滚动 */
}

/* 确保 router-view 占据除底部导航栏外的所有空间 */
:deep(router-view) {
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 如果内容超出，允许内部滚动 */
}

/* BottomNav 的样式 */
:deep(BottomNav) {
  height: 5vh; /* 底部导航栏的高度 */
  background-color: #f0f0f0; /* 示例背景色 */
}


</style>